<template>
    <div class="post-comment">
        <van-field
            v-model.trim="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
        />
        <van-button
            @click="onPost"
            class="post-btn"
            size="small"
            :disabled="!message"
            >发布</van-button
        >
    </div>
</template>

<script>
import { addComment } from '@/api/comment'

export default {
    components: {},
    props: {
        // 如果是发布文章评论，则传递文章 ID
        // 如果是发布评论回复，则传递评论 ID
        target: {
            type: [String, Number, Object],
            required: true
        },
        // 如果是发布评论回复，则传递文章 ID
        articleId: {
            type: [String, Number, Object],
            default: null
        }
    },
    data () {
        return {
            // 输入框内容
            message: ''
        }
    },
    created () { },
    computed: {},
    methods: {
        // 发布评论
        async onPost () {
            this.$toast.loading({
                message: '发布中...',
                forbidClick: true
            })
            const { data: res } = await addComment({
                target: this.target,
                content: this.message,
                art_id: this.articleId ? this.articleId : null
            })
            // console.log(res)

            this.$emit('post-success', res.data.new_obj)

            this.$toast.success('发布成功!')

            this.message = ''
        }
    },
    watch: {}
}
</script>

<style scoped>
.post-comment {
    display: flex;
    align-items: center;
    padding: 14px;
}
.post-comment .post-btn {
    width: 50px;
}
</style>
